<template>
	<view class="content pc-tou-gao " >
		<view class="scroll-fix" >

		
			<view class="d-kuan-juzhong ">
				<!--头部-->
				<view class="d-kuan pc-dingbu ">
					<DToubu 
					@login-success="handleLoginSuccess" 
					:dengluxianshi="denglu_xianshi"
					@update-dengluxianshi="handleUpdateDengluxianshi"
					></DToubu>
					
				</view>
				


				<!--头部-->
				<!--下面内容-->
				<view class="d-kuan d-clear">
					<uv-row customStyle="margin-bottom: 10px" :gutter="10">
						<!-- #ifdef H5 -->
						<uv-col span="2" class="pc-yincang">
							<!--左边导航-->
							<view class="d-daohang d-you-10 pc-yincang d-y-gundong d-shang-20" id="zuo-daohang" :style="{height: leftNavHeight}">
								<view class="d-daohang-5 " >
									<Ddaohang 
									@denglu-fabu="denglu_fabu"
									></Ddaohang>
								</view>
							</view>
						</uv-col>
						<!-- #endif -->
						<uv-col :span="kuan_shu">
								<!--头部背景-->
								<view class="pc-neikuang-20-list" >
										<view class="d-kuan   d-fu-shang-10 d-yuanjiao-20-20" :style="{opacity: dataLoaded ? '1' : '0', transition: 'opacity 0.5s ease-in-out'}">
											<view class="d-fu-zuoyou-10">
												<view class="d-gao-250 relative d-yuanjiao-20-20" style="background-image: url('/static/img/beijing000.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center;">
													<view class="d-kuan ">
														<view class="d-neikuang-10 ">

															<view class="d-fanhui-40 d-shang-10" @click="fanhui">
																<uv-icon name="arrow-left" color="#ffffff" size="18"></uv-icon>
															</view>
														</view>
													</view>
													<view class="d-kuan d-buhuanhang">
														<view class="d-kuang-100 d-shangxia-juzhong d-zuo-20 d-yuanjiao-50">
															<image :src="u_data.avatar" class="d-yuanjiao-50" style="width: 50px; height: 50px;" mode="aspectFill"></image>

															
														</view>
														<view class="d-kuan d-shang-30">
															<view class="d-wenzi-yanse-bai-0 d-jiacu d-zuo-10">{{  u_data.name }}</view>
							
															<!--view class="d-shang-5 d-wenzi-yanse-bai-0 d-buhuanhang">
																<view class="d-shang-5"> <uv-icon name="account" color="#ffffff" labelColor="#ffffff" size="26" :label="quan_data"></uv-icon> </view>
																<view class="d-shang-5 d-zuo-10"> <uv-icon name="heart" color="#ffffff" labelColor="#ffffff" size="26" :label="'粉丝：'+jiaquan_shu"></uv-icon> </view>

															</view-->
															<!--view class="d-kuan d-shang-5">
																
																<uv-avatar-group :urls="quan_data" size="24" gap="0.3"></uv-avatar-group>

															</view-->
															<!--view class="d-shang-5 d-buhuanhang d-wenzi-yanse-bai-0"> 
															
																<uv-icon name="file-text" color="#ffffff" labelColor="#ffffff" size="26" ></uv-icon>
																
															</view-->
														</view>
														<view class="d-kuang-100 d-shangxia-juzhong d-you-20">
															<view v-if="guanzhu_panduan==0" class="d-kuang-30-100 d-beijing-lvse-1" @click="postGuanzhu_api(uid)">+关注</view>
															<view v-if="guanzhu_panduan==1" class="d-kuang-30-100 d-beijing-lvse-2" @click="postGuanzhu_api(uid)">已关注</view>

														</view>
														

															
													</view>
													<uv-row customStyle="margin-bottom: 10px">
														<uv-col span="4" customStyle="display: flex; justify-content: center; align-items: center;">
															<uv-count-to color="#ffffff" :startVal="0" :endVal="u_data.tiezi"></uv-count-to>
															<uv-icon name="order"  color="#ffffff" labelColor="#ffffff" size="24" label="帖子"></uv-icon>
														</uv-col>
														<uv-col span="4" customStyle="display: flex; justify-content: center; align-items: center;">
															<uv-count-to color="#ffffff" :startVal="0" :endVal="u_data.guanzhu"></uv-count-to>
															<uv-icon name="plus" color="#ffffff" labelColor="#ffffff" size="20"  label="关注"></uv-icon>
														</uv-col>
														<uv-col span="4" customStyle="display: flex; justify-content: center; align-items: center;">
															<uv-count-to color="#ffffff" :startVal="0" :endVal="u_data.dianzan"></uv-count-to>

															<uv-icon name="thumb-up" color="#ffffff" labelColor="#ffffff" size="24"  label="点赞"></uv-icon>

														</uv-col>
														
													</uv-row>
													
													
												</view>
											</view>
											<view class="d-kuan d-buhuanhang">
												<view class="d-kuan d-beijing-baise">
													<uv-tabs :list="daohang_list" customStyle="background-color: #ffffff;" lineColor="#000000"  @click="quan_click"></uv-tabs>

												</view>
												
												

											</view>
											
										</view>

								</view>
								
								
								
							<view class="pc-neikuang-20" >
								<!--uv-divider text="最新分享" textSize="20"></uv-divider-->
								<view class="d-clear"></view>
								<view v-if="shenhe_shu > 0" class="d-kuan ">
									<view class="d-neikuang-10">
										<uv-button @click="shenhe" type="primary" size="small" iconColor="#ffffff" icon="chat" shape="circle" color="linear-gradient(to right, rgb(59, 216, 169), rgb(46, 127, 213))" :text="'新贴审核('+shenhe_shu+')'"></uv-button>
									</view>

								</view>
								<view class="d-clear"></view>
								<view class="d-kuan d-beijing-baise d-yuanjiao-10 ">
									<view class="d-neikuang-10 ">
									    <uv-tabs :list="list_shuxing" lineColor="#02c7b6" @click="click_suxing" :itemStyle="{ height: '44px',color:'#2daf99',fontSize: '20px'}"></uv-tabs>
									</view>
								</view>
								
								<view class="d-clear"></view>
								<!--内容-->
									<uv-row customStyle="flex-wrap: wrap" :gutter="20" wrap>
										<uv-col v-for="(tie,index) in tiezi_list" span="12" >
											<view class="d-waigao-20 d-beijing-baise d-yuanjiao-10 d-bianhua-10">
												<!--头像-->
												<view class="d-kuan ">
													<view class="d-baifen-50 d-zuo d-buhuanhang">
														<view class="d-gaokuang-40 d-kuanggao-40 d-yuanjiao-40 d-box" @click="getgeren(tie.uid)">
														    <image v-if="tie.touxiang" :src="tie.touxiang" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-beijing-hui d-img-anhei"></image>
															<image v-else src="/static/assets/images/avatar.png" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-beijing-hui d-img-anhei"></image>
														</view>
														<view class="d-kuan d-zuo-10" @click="getgeren(item.uid)">
															<view class="d-wenzi-14 d-jiacu d-wenzi-hei">{{ tie.mingcheng }} </view>
															<view class="d-wenzi-14 d-wenzi-yanse-hui d-chaochu-1">{{ tie.fabushijian }}</view>
														</view>
													</view>
													<view class="d-baifen-50 d-you">
														<view class=" d-neirong-you d-you" >
															<!--view v-if="denglu_xianshi == 1" @click="getGuanzhus(index,item.uid)" class="d-you d-kuan-40 d-beijing-hei d-wenzi-yanse-bai-0 d-neikuang-zuoyou-2-shangxia-4 d-wenzi-12 d-yuanjiao-50 d-neirong-juzhong" >已关注</view>
															<view v-else @click="getGuanzhus(index,item.uid)" class="d-kuan-40 d-beijing-hui-f6 d-wenzi-hei d-neikuang-zuoyou-2-shangxia-4 d-wenzi-12 d-yuanjiao-50 d-neirong-juzhong" >关 注</view-->
														</view>
													</view>

												</view>
												<view class="d-clear"></view>
												<!--内容-->
												<view class="d-zuoyou-neikuang-10 ">
													<!--标题-->
													<view v-if="tie.quan_daohang && tie.quan_daohang.id">
														<image v-if="tie.quan_daohang && tie.quan_daohang.tubiao" :src="tie.quan_daohang && tie.quan_daohang.tubiao" mode="aspectFill" class="d-img-30 d-zuo d-you-10" style="margin-top: -5px;"></image>
														<view v-else class="d-diy-tubiao d-zuo d-you-10" :style="{ backgroundColor: tie.quan_daohang && tie.quan_daohang.yanse }">{{tie.quan_daohang && tie.quan_daohang.jiancheng}}</view>
													</view>
													<view v-if="tie.leixing ==1" class="d-wen-tubiao d-zuo d-you-10">问</view>
													<view v-if="tie.leixing ==2" class=" d-zuo d-you-10">
														<!--增加类型判断-->
                                                        <image :src="getTitleIcon(tie.title)" mode="aspectFill" class="d-img-30"></image>
													</view>
													<view 
														class="d-jiacu d-shang-10 d-wenzi-16 d-xia-10 d-younei-10  d-wenzi-hei d-jiacu" 
														@click="tiezi(tie.cid,tie.id)"
													>{{ tie.title }}</view>
													
													<!--进度-->
													<view v-if="tie.jindu && tie.jindu.jindu == 1" class="d-kuan" @click="tiezi(tie.cid,tie.id)">
														<uv-steps :current="tie.jindu && tie.jindu.zhuangtai" class="d-shang-20">
															<uv-steps-item title="已准备" customStyle="font-size: 12rpx;" :desc="tie.jindu && tie.jindu.tianjiashijian"></uv-steps-item>
															<uv-steps-item title="进行中" :desc="tie.jindu && tie.jindu.kaishishijian"></uv-steps-item>
															<uv-steps-item title="已完成" :desc="tie.jindu && tie.jindu.jieshushijian"></uv-steps-item>
														</uv-steps>
													</view>
													<!--内容-->
													<view 
													    class="d-wenzi-12 d-wenzi-yanse-hui d-shang-10 d-xia-10 d-younei-10  d-chaochu-3"
													    @click="tiezi(tie.cid,tie.id)"
													>
														{{ tie.jianjie }}
													</view>
													<view class="d-clear"></view>
													<view v-if="tie.leixing ==1" class="">
														<uv-tags
														v-if="tie.pinglun > 0"
														:text="'已经有'+tie.pinglun+'条回答'" 
														size="mini"
														type="success" 
														shape="circle" 
														icon="edit-pen" 
														plain 
														plainFill
														bgColor="#ffffff"
														borderColor="#ffffff"
														color="#02c7b6"
														iconColor="#02c7b6"
														></uv-tags>
														
													</view>
													<!--图片-->
													<view class="d-fu-kuan-10 d-buhuanhang" @click="tiezi(tie.cid,tie.id)">
														<block v-for="(itemtu, indextu) in tie.tupian" :key="indextu">

																<view class="d-kuan-30 d-zuo d-liangbian-10" v-if="indextu < 3">
																	<image :src="itemtu" mode="aspectFill" class="d-img-100-bai d-yuanjiao-6 d-yinying-10 d-img-anhei"></image>
																</view>
															
															<!--view class="d-kuan-30 d-zuo d-liangbian-10" v-if="indextu < 9">
																<image :src="itemtu" mode="aspectFill" class="d-img-100-bai d-yuanjiao-6 d-yinying-10 d-img-anhei"></image>
															</view-->
														</block>


														<view class="d-clear"></view>
													</view>
													<view class="d-clear"></view>
												<!--音频-->
												<NlAudioPlayer
												    :id="'yinpin_'+index"
												    v-if="tie.yinpin && tie.yinpin[0]"
													:key="'yinpin_'+index+'_'+(audioSrcMap[index] || '')"
													:src="audioSrcMap[index] || ''"
													style="margin: 20px 0;"
													:bar-bg-style="{ borderRadius: '50px' }"
													:bar-style="{ backgroundColor: '#27a393', borderRadius: '50px' }"
													:dot-style="{ width: '30rpx', height: '30rpx', backgroundColor: '#2ebdac' }"
													:ref="el => this.setAudioRef(el, index)"
													@click="onAudioPlay(index)"
													@tap="onAudioPlay(index)"
												></NlAudioPlayer>
												<!--视频-->
												<view v-if="tie.shipin_kaiguan == 1 && tie.shipin && tie.shipin[0] && tie.shipin[0].shipin" class="d-shang-10">
													<video 
										class="d-yuanjiao-10 d-kuan d-video-height"
										:key="'shipin_'+index+'_'+(videoSrcMap[index] || '')"
										:src="videoSrcMap[index] || ''"
										:poster="tie.shipin && tie.shipin[0] && tie.shipin[0].shipintu" 
										controls
										:ref="el => this.setVideoRef(el, index)"
										@click="onVideoClick(index)"
										@tap="onVideoClick(index)"
									>
									</video>
												</view>

													<!--评论-->
													<view class="d-kuan d-shang-10">

														<view class="">
															<uv-row customStyle="flex-wrap: wrap" :gutter="20" wrap>
																<uv-col span="3" >
																	<view class="d-biaoqian">
																		<uv-tags 
																		:text="tie.quanzi.slice(0, 2)" 
																		size="mini"
																		type="success" 
																		shape="circle" 
																		icon="tags-fill" 
																		plain 
																		plainFill
																		bgColor="#ffffff"
																		borderColor="#02c7b6"
																		color="#02c7b6"
																		iconColor="#02c7b6"
																		></uv-tags>
																	</view>

																</uv-col>
																<uv-col span="6"   @click="tiezi(tie.cid,tie.id)">
																	<uv-row customStyle="flex-wrap: wrap" :gutter="20" wrap>
																		<uv-col span="4">
																		    <uv-icon name="chat" color="#bbbbbb" size="18" :label="tie.pinglun" labelColor="#bbbbbb"></uv-icon>
																		</uv-col>
																		<uv-col span="4">
																			<uv-icon name="heart" color="#bbbbbb" size="18" :label="tie.shoucang" labelColor="#bbbbbb"></uv-icon>
																		</uv-col>
																		<uv-col span="4" >
																			<uv-icon name="thumb-up" color="#bbbbbb" size="18" :label="tie.dianzan" labelColor="#bbbbbb"></uv-icon>
																		</uv-col>
																	</uv-row>

																</uv-col>
																<uv-col span="3" customStyle="display: flex; justify-content: flex-end; " @click="tiezi(tie.cid,tie.id)">
																	<view class="d-kuan" style="display: flex; justify-content: flex-end; ">
																		<uv-avatar-group :urls="tie.dianzan_touxiang" size="22" gap="0.4"></uv-avatar-group>
																	</view>
																</uv-col>
															</uv-row>
														</view>
													</view>
												</view>
											</view>

										</uv-col>
										<!-- 加载状态提示 -->
										<view class="d-kuan d-juzhong d-shangxia-20" v-if="isLoading">
											<uv-loading-icon></uv-loading-icon>
  										</view>
  										<view class="d-kuan d-juzhong d-shangxia-20 d-wenzi-hui" v-if="noMoreData">
  										    <uv-divider text="没有更多数据了"></uv-divider>
											  <uv-gap height="100" bgColor="#bbb"></uv-gap>
  										</view>
									</uv-row>
							    </view>
						</uv-col>
						<!-- #ifdef H5 -->
						<uv-col span="3" class="pc-yincang">
							<view class="d-daohang d-you-10 pc-yincang d-shang-20" id="zuo-daohang" :style="{height: leftNavHeight}">
								<view class="d-you-kuang">
									<!--view class="d-kuan  " id="yuedu_gao" :style="{height: leftNavHeight,width: rightColWidth,marginTop: '10px'}">
										<view class=" gundong-2"  style="height: 100%; display: flex; flex-direction: column;overflow-y: auto;">
											<view class="d-yuanjiao-10  d-beijing-e3 d-bianhua-10 ">
												<view class="d-kuan d-jiacu d-wenzi-16">
													站点资讯
												</view>
												<view class="d-hanggao-37 d-buhuanhang d-wenzi-16 d-quxian-0 d-chaochu d-shangxia-5">
													<view class="d-jiacu d-you-10 d-zitiyanse-hongse">1</view>
													<view data-id="20" data-toggle="modal" data-target="#myModalssss" class="tantie"> 
														Xiaomi 14 真机展示图					
													</view>
												</view>
												<view class="d-hanggao-37 d-buhuanhang d-wenzi-16 d-quxian-0 d-chaochu d-shangxia-5">
													<view class="d-jiacu d-you-10 d-zitiyanse-hongse">1</view>
													<view data-id="20" data-toggle="modal" data-target="#myModalssss" class="tantie"> 
														Xiaomi 14 真机展示图					
													</view>
												</view>

												<view class="d-hanggao-37 d-buhuanhang d-wenzi-16 d-quxian-0 d-chaochu d-shangxia-5">
													<view class="d-jiacu d-you-10 d-zitiyanse-hongse">1</view>
													<view data-id="20" data-toggle="modal" data-target="#myModalssss" class="tantie"> 
														Xiaomi 14 真机展示图					
													</view>
												</view>
												<view class="d-hanggao-37 d-buhuanhang d-wenzi-16 d-quxian-0 d-chaochu d-shangxia-5">
													<view class="d-jiacu d-you-10 d-zitiyanse-hongse">1</view>
													<view data-id="20" data-toggle="modal" data-target="#myModalssss" class="tantie"> 
														Xiaomi 14 真机展示图					
													</view>
												</view>


											</view-->
											<!--推荐圈子-->
											<!--view class="d-yuanjiao-10 d-waigao-20 d-beijing-e3 d-bianhua-10 ">
												<view class="d-kuan d-jiacu d-wenzi-16">
													推荐圈子
												</view>
												<uv-row customStyle="margin-bottom: 10px">
													<uv-col span="3" customStyle="display: flex; flex-direction: column; align-items: center;margin-top: 10px">
														<uv-avatar src="/static/img/011.jpg" shape="square"></uv-avatar>
														<view class="demo-layout bg-purple">321</view>
													</uv-col>
													<uv-col span="3" customStyle="display: flex; flex-direction: column; align-items: center;margin-top: 10px">
														<uv-avatar src="/static/img/011.jpg" shape="square"></uv-avatar>
														<view class="demo-layout bg-purple">321</view>
													</uv-col>
													<uv-col span="3" customStyle="display: flex; flex-direction: column; align-items: center;margin-top: 10px">
														<uv-avatar src="/static/img/011.jpg" shape="square"></uv-avatar>
														<view class="demo-layout bg-purple">321</view>
													</uv-col>
													<uv-col span="3" customStyle="display: flex; flex-direction: column; align-items: center;margin-top: 10px">
														<uv-avatar src="/static/img/011.jpg" shape="square"></uv-avatar>
														<view class="demo-layout bg-purple">321</view>
													</uv-col>


												</uv-row>


											</view-->
											<!--推荐课程-->
											<!--view class="d-yuanjiao-10 d-waigao-20 d-beijing-e3 d-bianhua-10 ">
												<view class="d-kuan d-jiacu d-wenzi-16">
													推荐课程
												</view>
												<uv-row customStyle="margin-bottom: 10px;flex-wrap: wrap">
													<uv-col span="6" customStyle="display: flex; flex-direction: column; align-items: center;margin-top: 10px">
														<view class="d-zuo d-tu-kuan-110 d-piaofu-0">

															<uv-image src="http://im.duixin.com/uploadfile/202507/86f3134bfebdfdf.jpg" width="190rpx" height="240rpx" radius="10"></uv-image>
														</view>

														<view class="demo-layout bg-purple">321</view>
													</uv-col>
													<uv-col span="6" customStyle="display: flex; flex-direction: column; align-items: center;margin-top: 10px">
														<view class="d-zuo d-tu-kuan-110 d-piaofu-0">

															<uv-image src="http://im.duixin.com/uploadfile/202507/86f3134bfebdfdf.jpg" width="190rpx" height="240rpx" radius="10"></uv-image>
														</view>

														<view class="demo-layout bg-purple">321</view>
													</uv-col>
													<uv-col span="6" customStyle="display: flex; flex-direction: column; align-items: center;margin-top: 10px">
														<view class="d-zuo d-tu-kuan-110 d-piaofu-0">

															<uv-image src="http://im.duixin.com/uploadfile/202507/86f3134bfebdfdf.jpg" width="190rpx" height="240rpx" radius="10"></uv-image>
														</view>

														<view class="demo-layout bg-purple">321</view>
													</uv-col>
													<uv-col span="6" customStyle="display: flex; flex-direction: column; align-items: center;margin-top: 10px">
														<view class="d-zuo d-tu-kuan-110 d-piaofu-0">

															<uv-image src="http://im.duixin.com/uploadfile/202507/86f3134bfebdfdf.jpg" width="190rpx" height="240rpx" radius="10"></uv-image>
														</view>

														<view class="demo-layout bg-purple">321</view>
													</uv-col>



												</uv-row>


											</view-->
											<!--底部-->
											<!--view class="d-kuan d-waigao-20 d-bianhua-10 "></view>																		
										</view>																								
									</view-->
								</view>
							</view>
						</uv-col>
						<!-- #endif -->
					</uv-row>

					

				</view>
				<!--下面内容-->


			</view>

			<view class="d-clear"></view>
		
		</view>
		<!--底部-->
		<view class="d-kuan d-waigao-20 d-bianhua-10 pc-yincang"></view>

		<view class="d-clear pc-yincang"></view>
		<view class="d-weibu pc-yincang">
			<Dweibu></Dweibu>
		</view>
		<!--底部登录-->
		<Dweibudenglu
			ref="weibudenglu"
			:denglu_xianshi_weibu="denglu_xianshi_weibu"
			@denglu_close_get="denglu_close_get"
		>
		</Dweibudenglu>

	</view>
</template>

<script>
    import Api from '@/utils/api.js'; 
	import QuanApi from '@/utils/quan_api.js';
	import UApi from '@/utils/u_api.js';
	import { getRequest,postRequest } from '@/utils/wxRequest.js';
    //引入组件 d-toubu
    import DToubu from '@/components/d-toubu/d-toubu.vue'
	import Ddaohang from '@/components/d-daohang/d-daohang.vue'
	import Dweibu from '@/components/d-weibu/d-weibu.vue'
	import Dzhifu from '@/components/d-zhifu/d-zhifu.vue'
	import NlAudioPlayer from '@/uni_modules/nl-audio-player/components/nl-audio-player/nl-audio-player.vue'
	import Dweibudenglu from '@/components/d-weibu-denglu/d-weibu-denglu.vue'
	
	
	
	export default {
		data() {
				return {
					audioPlayers: {}, // 存储音频播放器引用
						audioSrcMap: {}, // 音频懒加载：按索引存储已加载的src
						videoPlayers: {}, // 存储视频元素引用
						videoSrcMap: {}, // 视频懒加载：按索引存储已加载的src
					uid:'', // 用户id
					title: 'Hello',
					leftNavHeight: '500rpx', // 默认高度
                rightColWidth: '300px', // 默认宽度
					rightColLeft: '0px', // 添加这个属性
				
				erjidata:[],
				erjiindex:'',//当前激活的二级菜单索引
				activeIndex: -1, // 当前激活的一级菜单索引
				zhishi_tuijian_data:[], // 知识推荐数据
				zhishi_daohang_list:[], // 知识导航列表
				zhishi_list:[], // 知识列表
				haibao_data:[], // 海报数据
				imageSize: {
        		    width: 0,
        		    height: 0
        		},
				tubiaolist: 
				['integral', 'kefuv-ermai', 'coupon', 'gift', 'scan',
					'pause-circle', 'volume-off', 'email', 'list'
				],
				denglu_xianshi:0, // 登录显示

				tiezi_list:[], // 帖子列表

				currentPage: 1, //下拉加载
    			pageSize: 12, //下拉加载
    			isLoading: false, //下拉加载
    			noMoreData: false, //下拉加载
				
				kuan_shu: 7, //格大小
				swiperHeight: '250',
				gao: '20', //图片高度
				daohang_list: [
					{
						name: '帖子',
						id: '1'
					}, {
						name: '圈子',
						id: '2'
					}

				],
				quan_data:[],
				
				shenhe_shu:0,//审核帖子数量
				u_data:[], // 用户信息
				dataLoaded: false,
				guanzhu_panduan:0,
				list_shuxing:[
					{
						id:0,
						name: '全部',
					},
					{
						id:1,
						name: '图文',
					},
					{
						id:2,
						name: '视频',
					},
					{
						id:3,
						name: '音频',
					},
					{
						id:4,
						name: '附件',
					},
					{
						id:5,
						name: '付费文章',
					},
				],
				denglu_xianshi_weibu:0,//登录



			}
		},
		components: {
  		    DToubu,
			Ddaohang,
			Dweibu,
			Dzhifu,
			NlAudioPlayer,
			Dweibudenglu,
  		},
		mounted() {
				//var m = this.$store.state;
				//console.log('mmmm',m);
				
    	    	this.setLeftNavHeight();
				this.getRightColWidth(); // 添加这行
				// #ifdef H5
    	    	// 添加窗口大小变化监听
    	    	window.addEventListener('resize', this.setLeftNavHeight);
				window.addEventListener('resize', this.getRightColWidth); // 添加窗口大小变化监听
				
                window.addEventListener('scroll', this.handleScroll);
               // #endif
                
				
				//this.onImageLoad(e);
    		},
    	beforeDestroy() {
    	    	// 移除监听
				// #ifdef H5
    	    	window.removeEventListener('resize', this.setLeftNavHeight);
				window.removeEventListener('resize', this.getRightColWidth); // 添加这行
				// #endif
				// 移除滚动事件监听
                // #ifdef H5
                window.removeEventListener('scroll', this.handleScroll);
               // #endif
    		},
		onShow() {
			//var m = this.$store.state;
			//this.denglu_fabu();
			
			
			//console.log('12300000:', this.$store.state.memberuid);
			this.zhishi_daohang_api();
			var e = this;
			this.zhishi_list_api(e);
			//this.haibao_api();
			this.zhishituijian_api();
			this.getTiezi_api(e,false);
			//this.uid = this.$store.state.memberuid;
			if(!this.uid){
				//this.uid = this.$store.state.memberuid;
				this.denglu_xianshi = 1;
				//console.log('空uid:', this.uid);
				this.godenglu(); // 暂时注释掉自动跳转，便于调试

			}
			this.getGuanzhu_panduan_api(); //判断关注
			
			
			//this.getShenhe_shu_api();
			
		},
		onLoad(e) {
			this.uid = e.uid; // 会员id
			
			this.getu_api();
			console.log('uid:', e.uid);
			
		},
		computed: {
		  yidenglu() {
		    return (this.$store.state.memberuid && this.$store.state.keycode) ? 1 : 0;
		  },
		  touxiang() {
		    return this.$store.state.member? this.$store.state.member.avatar : '';
		  },
		  name1() {
		    return this.$store.state.member? this.$store.state.member.name : '';
		  },
		  pc() {
		    return this.$store.state.kuan.pc;
		  },
		},
		onReachBottom() {
  			this.onReachBottom(); //下拉加载分页
  		},

		methods: {
			//图片
			onImageLoad(e, index) {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    const windowHeight = systemInfo.windowWidth;
				if(this.pc){
					var gao = 30;
					
				} else {
					var gao = 0;
				}


				this.$nextTick(() => {
        		    const query = uni.createSelectorQuery().in(this);
        		    query.select('#tupian-'+index).boundingClientRect(data => {
        		        if (data && data.width > 0 && data.height > 0) {
        		            this.$set(this.haibao_data[index], 'imageSize', {
        		                width: data.width,
        		                height: data.height + gao
        		            });
							console.log('图片尺寸:', this.haibao_data[index].imageSize);
        		        } else {
        		            console.warn(`图片${index}尺寸获取失败`);
        		            this.$set(this.haibao_data[index], 'imageSize', {
        		                width: 300,
        		                height: 200
        		            });
        		        }
        		    }).exec();
        		});

    		},
            // 新增：根据标题后缀选择图标
            getTitleIcon(title) {
                const t = (title || '').toLowerCase();
                // 提取最后一个点后的后缀
                const dotIdx = t.lastIndexOf('.');
                const ext = dotIdx !== -1 ? t.slice(dotIdx + 1) : '';
                if (ext === 'pdf' || t.includes('.pdf')) return '/static/img/pdf.png';
                if (ext === 'txt' || t.includes('.txt')) return '/static/img/txt.png';
				if (ext === 'pptx' || t.includes('.txt')) return '/static/img/ppt.png';
                if (ext === 'rar' || ext === 'zrp' || ext === 'gz' || t.includes('.rar') || t.includes('.zrp') || t.includes('.gz')) return '/static/img/rar.png';
                return '/static/img/w.png';
            },
			getRightColWidth() {
				// 获取系统信息
				//const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    //const windowWidth = systemInfo.windowWidth;
				var d = this;

                this.$nextTick(() => {
				if(this.pc){
					d.gao = 20;
					d.kuan_shu = 7;
					d.swiperHeight = '250';
				} else {
					d.gao = 10;
					d.kuan_shu = 12;
					d.swiperHeight = '120';

				}
				//console.log('窗口高度:', windowWidth);

                 const query = uni.createSelectorQuery().in(this);
                 query.select('#youbiankuan').boundingClientRect(rect => {
                   if (rect) {
                     /*this.rightColWidth = `${rect.width+20}px`;
                     console.log('右侧列宽度:', this.rightColWidth);*/
					 	this.rightColWidth = `${rect.width-80}px`;
                    	this.rightColLeft = `${rect.left}px`; // 计算左侧位置
                    	console.log('右侧列位置:', this.rightColWidth);
                   }
                 }).exec();
               });
            },

			//首页
			shouye(){
				uni.navigateTo({
					url: '/pages/index/index',
					fail: (err) => {
						console.error('跳转失败:', err)
					}
				})
			},
			// ...其他方法保持不变...
			yiji(index) {
    		  // 切换激活的一级菜单
    		  this.activeIndex = index;
    		  // 根据激活的一级菜单显示对应的二级菜单
			  if(index == 0){
				  this.erjidata = [];
			  }else{
				  this.erjidata = this.zhishi_daohang_list[index].son;
			  }
			  const data = {
				  categories:index
			  }
			  this.zhishi_list_api(data);
    		  //this.erjidata = this.zhishi_daohang_list[index].son;
			  console.log(this.erjidata);
    		},
			erji(index) {
    		  // 切换激活的二级菜单
    		  this.erjiindex = index;

			  const data = {
				  categories:index
			  }
			  this.zhishi_list_api(data);
			  //console.log(index);

    		},
			toggleErji(index) {
    		  if (this.activeIndex === index) {
    		    // 点击已激活的菜单，收起二级菜单
    		    this.activeIndex = -1;
    		    this.currentErji = [];
    		  } else {
    		    // 点击新的菜单，显示对应的二级菜单
    		    this.activeIndex = index;
    		    this.currentErji = this.zhishi_daohang_list[index].erji;
    		  }
    		},
			setLeftNavHeight() {
        	    // 获取系统信息
        	    const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    const windowHeight = systemInfo.windowHeight;
        	    const headerHeight = 70; // 头部高度估计值
        	    const calculatedHeight = windowHeight - headerHeight;
				
        	    // 设置左边导航高度
        	    this.leftNavHeight = `${calculatedHeight}px`;
        	},
			zhishi(id){
				console.log(id);
				try {
  				  uni.navigateTo({
  				    url: '/pages/zhishi/index?id='+id,
  				    fail: (err) => {
  				      console.error('跳转失败:', err)
  				    }
  				  })
  				} catch (e) {
  				  console.error('跳转异常:', e)
  				}
			},
			
			handleLoginSuccess() {
  			  this.$forceUpdate();
  			},
			// 知识导航接口
			zhishi_daohang_api(){
				var get_data = getRequest(Api.getZhishi_daohang());
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						// 转换时间戳为日期格式
						//var list = res.data ? res.data.data : {};
						var list = res.data && res.data.data ? res.data.data : [];
						// 在 list 前面添加插入一个新的数据“首页”
						/*list.unshift({
            			    id: '0',
							pid: '0',
            			    name: '首页',
            			    icon: 'home',
            			    son: [] // 首页没有二级菜单
            			});*/
        				this.zhishi_daohang_list = list;
						//console.log(list);
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
					}
				})
			},
			zhishi_list_api(data){
				if (!data) data = {};
				if (!data) data = {};
		  		if (!data.page) data.page = 1;
		  		if (!data.categories) data.categories = 0;
		  		if (!data.search) data.search = '';
				var get_data = getRequest(Api.getZhishi_list(data));
				var res;	
				get_data.then(duixin_data => {
					res = duixin_data;	
					if(res.data.code) {
						// 转换时间戳为日期格式
						var list = res.data? res.data.data : {};
						this.zhishi_list = list;	
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
					}
				})
			},
			// 海报接口
			haibao_api(){
				// 获取系统信息
				//const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    //const windowHeight = systemInfo.windowHeight;
				if(this.pc){
					var gao = 200;
					
				} else {
					var gao = 120;

				}

				var get_data = getRequest(Api.getHaibao());
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						// 转换时间戳为日期格式
						//var list = res.data ? res.data.data : {};
						/*var list = res.data && res.data.data ? res.data.data : [];
        				this.haibao_data = list;*/
						this.haibao_data = (res.data.data || []).map(item => ({
            			    ...item,
            			    imageSize: { width: 300, height: gao } // 添加默认尺寸
            			}));
						
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
					}
				})
			},
			// 知识推荐 getZhishi_tuijian
			zhishituijian_api(){
				var get_data = getRequest(Api.getZhishi_tuijian());
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						// 转换时间戳为日期格式
						//var list = res.data ? res.data.data : {};
						/*var list = res.data && res.data.data ? res.data.data : [];
        				this.haibao_data = list;*/
						this.zhishi_tuijian_data = res.data.data;
						
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
					}
				})


			},
			denglu_fabu(){
				if(this.yidenglu == 0){
					this.denglu_xianshi = 1;
					
				} else {
					this.denglu_xianshi = 0;
						
				}
				
				console.log('发布登录',this.denglu_xianshi);
				
			},
			// 更新判断是否登录
			handleUpdateDengluxianshi(value) {
			  this.denglu_xianshi = value;
			  console.log('关闭登录',this.denglu_xianshi);
			},
			click_suxing(e){
				
				//this.index_suxing = 0;
				let data = {};
				//全部
				//推荐
				if(e.id == 1){
					data.tupianzhi = 1;
				}
				//视频
				if(e.id == 2){
					data.shipinzhi = 1;
				}
				//音频
				if(e.id == 3){
					data.yinpinzhi = 1;
				}
				//附件
				if(e.id == 4){
					data.fujianzhi = 1;
				}
				//付费文章
				if(e.id == 5){
					data.fufeizhi = 1;
				}
				this.getTiezi_api(data, false);
			},
			// 帖子列表
			getTiezi_api(data,isLoadMore = false){
				if (!data) data = {};
				if (!data) data = {};
				if (!data.page) data.page = 1;
				if (!data.categories) data.categories = 0;
				if (!data.search) data.search = '';
				const url = {
					uid:this.uid,
				};
				
				var get_data = getRequest(Api.getTiezi_list(data),url);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						// 转换时间戳为日期格式
						var list = res.data? res.data.data : {};
						if (isLoadMore) {
        				  // 加载更多时追加数据
        				  this.tiezi_list = [...this.tiezi_list, ...list];
        				} else {
        				  // 非加载更多时替换数据
        				  this.tiezi_list = list;
        				}	
						this.noMoreData = list.length < this.pageSize;

					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
					}
					this.isLoading = false;
				}).catch(() => {
    			  this.isLoading = false;
    			  if (isLoadMore) {
    			    this.currentPage--; // 加载失败时回退页码
    			  }
    			});


			},
			// 下拉加载更多
			onReachBottom() {
  			  if (this.isLoading || this.noMoreData) return;
  			  this.isLoading = true;
  			  this.currentPage++;
			  // 获取当前激活的分类ID
    			const currentCategoryId = this.activeIndex.id >= 0 ? this.activeIndex.id : 0;
    			

  			  const data = {
  			    page: this.currentPage,
  			    categories: currentCategoryId
  			  };
			  console.log('分页',this.activeIndex.id);
  			  this.getTiezi_api(data, true); // 添加第二个参数表示是加载更多
  			},
			// 帖子
			tiezi(cid,id){
				console.log(id);	
				try {
  				  uni.navigateTo({
  				    url: '/pages/tiezi/index?id='+id+'&cid='+cid,
  				    fail: (err) => {
  				      console.error('跳转失败:', err)
  				    }
  				  })
  				} catch (e) {
  				  console.error('跳转异常:', e)
  				}

			},
			//审核帖子数量
			getShenhe_shu_api(){
				const uid = this.$store.state.memberuid;
                const keycode = this.$store.state.keycode;
				var get_data = getRequest(QuanApi.getShenhe_shu(uid,keycode));
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						this.shenhe_shu = res.data.data;
					}
				})
			},
			// 审核帖子
			shenhe(){
				uni.navigateTo({
					url: '/pages/shenhe/index',
					fail: (err) => {
					  console.error('跳转失败:', err)
					}
				  })
			},
			//个人信息
			getu_api(){
				var uid = this.$store.state.memberuid;
				var keycode = this.$store.state.keycode;
				const data = {
						uid: this.uid,
						api_auth_uid: uid,
						api_auth_code: keycode,
					}
				var get_data = getRequest(UApi.getU(),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						if(this.uid){
							//this.u_data = res.data.data.wo;
						} else {
							//this.u_data = res.data.data.u;
						}
						this.u_data = res.data.data.u;
						// 自定义导航栏标题
						uni.setNavigationBarTitle({
							title: this.u_data.name + ' 个人主页',
						});
						//this.u_data = res.data.data;
						this.dataLoaded = true;
						
					}
				})

			},
			// 判断关注
			getGuanzhu_panduan_api(){
				// 确保从 Vuex 获取最新值
				const uid = this.$store.state.memberuid;
                const keycode = this.$store.state.keycode;

				// id ,cid 参数
				const data = {
					uid: uid,
					touid: this.uid,
				}
				// 打印
				console.log('touid:',this.tie);
				
				var get_data = getRequest(Api.getGuanzhu_panduan(uid,keycode),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code ) {
						this.guanzhu_panduan = res.data.data && res.data.data.guanzhu;
					} else {
						this.guanzhu_panduan = 0;
					}
					
				})

			},
			// 关注提交数据
			postGuanzhu_api(touid){
				// 确保从 Vuex 获取最新值
				const uid = this.$store.state.memberuid;
                const keycode = this.$store.state.keycode;
				if (!uid ||!keycode) {
    			    uni.showToast({
    			        title: '未登录',
    			        icon: 'none'
    			    });
					this.denglu_xianshi_weibu = 1;
    			    return;
				}
				// id,cid 参数
				const data = {
					uid: uid,
					touid: touid,
				}

				var get_data = postRequest(Api.postGuanzhu(uid,keycode),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.data && res.data.data.code==1) {
						this.guanzhu_panduan = 1;
						
						// 提示
						uni.showToast({
							icon: 'success', //有效的 icon 值为 success, loading, none
							title: '关注成功'
						});
					} else {
						this.guanzhu_panduan = 0;
						
						// 提示
						uni.showToast({
							icon:'success', //有效的 icon 值为 success, loading, none
							title: res.data.msg

						});
					}
				})

			},
			// 返回
            fanhui() {
				// 先清理音频
				this.clearAllAudio();
               // 获取页面栈
                 const pages = getCurrentPages();
                 // 如果页面栈长度小于等于1，说明没有上一级页面
                 if (pages.length <= 1) {
                    console.log('没有上一级页面');
                    uni.reLaunch({
                      url: '/pages/index/index'
                    });
                 } else {
                    // 有上一级页面则返回
                    uni.navigateBack({
                      delta: 1
                    });
                }
            },
            // 设置音频播放器引用
            setAudioRef(el, index) {
                if (el) {
                    this.audioPlayers[index] = el;
                }
            },
            // 设置视频元素引用
            setVideoRef(el, index) {
                if (el) {
                    this.videoPlayers[index] = el;
                }
            },
            // 处理音频播放事件（点击时懒加载真实mp3并播放）
            onAudioPlay(index) {
                // 1) 懒加载：点击时设置真实src
                try {
                    const tie = Array.isArray(this.tiezi_list) ? this.tiezi_list[index] : null;
                    const realSrc = tie && tie.yinpin && tie.yinpin[0] ? tie.yinpin[0] : '';
                    if (realSrc) {
                        if (typeof this.$set === 'function') {
                            this.$set(this.audioSrcMap, index, realSrc);
                        } else {
                            this.audioSrcMap[index] = realSrc;
                        }
                    }
                } catch (e) {
                    console.warn('设置音频真实地址失败:', e);
                }

                // 2) 先停止其他所有音频
                this.clearAllAudio(index);
                
                // 3) 延迟后重新播放当前音频
                setTimeout(() => {
                    const currentAudio = this.audioPlayers[index];
                    if (currentAudio && typeof currentAudio.play === 'function') {
                        try {
                            currentAudio.play();
                        } catch (error) {
                            console.warn('播放音频失败:', error);
                        }
                    }
                }, 100);
            },
            // 视频点击播放：懒加载真实地址并播放
            onVideoClick(index) {
                // 1) 懒加载：在点击时设置真实src
                try {
                    const tie = Array.isArray(this.tiezi_list) ? this.tiezi_list[index] : null;
                    const realSrc = tie && tie.shipin && tie.shipin[0] && tie.shipin[0].shipin ? tie.shipin[0].shipin : '';
                    if (realSrc) {
                        if (typeof this.$set === 'function') {
                            this.$set(this.videoSrcMap, index, realSrc);
                        } else {
                            this.videoSrcMap[index] = realSrc;
                        }
                    }
                } catch (e) {
                    console.warn('设置视频真实地址失败:', e);
                }

                // 2) 暂停其它视频，避免并发播放
                this.closeAllVideos(index);

                // 3) 延迟后播放当前视频
                setTimeout(() => {
                    const player = this.videoPlayers && this.videoPlayers[index];
                    if (player && typeof player.play === 'function') {
                        try {
                            player.play();
                        } catch (e) {
                            console.warn('视频播放失败:', e);
                        }
                    }
                }, 100);
            },

            // 清除所有音频播放
            clearAllAudio(exceptIndex = null) {
                for (const index in this.audioPlayers) {
                    // 如果指定了exceptIndex，则跳过该索引的音频
                    if (exceptIndex !== null && parseInt(index) === exceptIndex) {
                        continue;
                    }
                    
                    const audioPlayer = this.audioPlayers[index];
                    if (audioPlayer) {
                        try {
                            // 使用组件提供的方法停止播放
                            if (audioPlayer.stop) {
                                audioPlayer.stop();
                            } 
                            // 如果有获取音频上下文的方法，也可以尝试停止
                            else if (audioPlayer.getAudioContext && audioPlayer.getAudioContext()) {
                                const audioContext = audioPlayer.getAudioContext();
                                if (audioContext && audioContext.pause) {
                                    audioContext.pause();
                                }
                            }
                        } catch (error) {
                            console.warn('停止音频播放失败:', error);
                        }
                    }
                }
            },
            // 关闭页面上所有的视频
            closeAllVideos(exceptIndex = null) {
                try {
                    if (this.videoPlayers && typeof this.videoPlayers === 'object') {
                        Object.keys(this.videoPlayers).forEach(key => {
                            const idx = Number(key);
                            if (exceptIndex !== null && idx === exceptIndex) return;
                            const videoPlayer = this.videoPlayers[key];
                            if (videoPlayer) {
                                try {
                                    if (typeof videoPlayer.pause === 'function') {
                                        videoPlayer.pause();
                                    }
                                    // 重置播放位置
                                    videoPlayer.currentTime = 0;
                                } catch (e) {
                                    console.warn('暂停视频失败:', e);
                                }
                            }
                        });
                    }
                } catch (e) {
                    console.error('关闭视频失败:', e);
                }
            },

            // 处理滚动事件
            handleScroll() {
                this.clearAllAudio();
                this.closeAllVideos();
            },
			quan_click(){
				

			},
			// 退出登录
			handleLogout() {
 			  
 			  this.godenglu(); // 暂时注释掉自动跳转，便于调试
			   
 			},
			//跳转个人信息
			godenglu(){
				//保持url到缓存，名称是u_url
				uni.setStorageSync('go_url', this.$route.fullPath);
				uni.navigateTo({
					url: '/pages/u/denglu',
				})
			},
			denglu_close_get(){
				//console.log('关闭登录');
				this.denglu_xianshi_weibu = 0;
			},





		}
	}
</script>

<style>

	.content {
		
		
		display: flex;
		flex-direction: column;
		/*align-items: center;*/
		
		background-color: #f3f3f3;
		
		margin-bottom: 0px;
		
		/*height: 100vh;*//* 添加全屏 */
		/*width: 100vw;*/ /* 添加全屏*/
		box-sizing: border-box;
		overflow-x: hidden;

		
		

	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	/* 屏幕宽度大于786px时隐藏uni-page-head */
    @media (min-width: 786px) {
        uni-page-head {
            display: none !important;
            opacity: 0 !important;
            height: 0 !important;
            visibility: hidden !important;
        }
    }
	/*.d-daohang{
		
		width: 600rpx;
	}*/
	/* 添加在style部分 */
	.d-daohang-zuo {
    position: fixed;
    left: 0;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #f5f5f5;
    z-index: 100;
	box-shadow: 2px 0 5px rgba(177, 177, 177, 0.1);
  }
  
  .d-daohang-you {
    position: fixed;
    left: 180rpx;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #fff;
    z-index: 100;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }
   
   
   
   
   
   
   
   
   
 
   
  .d-erji-item {
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
   /* border-bottom: 1px solid #f0f0f0;*/
  }
  
  .d-erji-item:active {
    background: #f5f5f5;
  }
  .you-guding {
	position: fixed;
	top: 0; /* 根据头部高度调整 */
	/*box-shadow: -2px 0 5px rgba(0,0,0,0.1);*/
	transition: all 0.3s ease;
}
/* 大于786px时的样式 */
@media screen and (min-width: 1024px) {
	.d-bianhua-10 {
		padding: 30px;
	}
	.pc-zuo-520 {
		margin-left: 520rpx;
	}
	.you-guding {
		position: fixed;
			
		top: 60px; /* 根据头部高度调整 */
		/*box-shadow: -2px 0 5px rgba(0,0,0,0.1);*/
		transition: all 0.3s ease;
	}
		
	
}
	.d-wen-tubiao {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background-color: #fe6881;
		border-radius: 20%;
	}
	.d-diy-tubiao {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		
		border-radius: 20%;
	}
</style>
